<template>
	<view class="main">
		<view class="apply-info">
			<view class="apply-info-item">
				<view class="apply-label">
					申请用户
				</view>
				<view class="apply-input">
					{{userName}}
				</view>
			</view>
			<view class="apply-info-item">
				<view class="apply-label">
					申请金额
				</view>
				<view class="apply-input">
					￥{{amount}}
				</view>
			</view>
			<view class="apply-info-item">
				<view class="apply-label">
					状态
				</view>
				<view class="apply-input red">
					{{statusText}}
				</view>
			</view>
			<view class="apply-info-item" v-if="isReject">
				<view class="apply-label">
					拒绝原因
				</view>
				<view class="apply-input">
					{{rejectContent}}
				</view>
			</view>
		</view>
		<view class="boxInfo">
			<view class="title">凭证</view>
			<view class="box-list">
				<view class="li-upload">
					<u-image width="200rpx" height="200rpx" :src="item.url" v-for="item in fileList" mode="heightFix" @click="openBigimg(item.url)"></u-image>
					<!-- <view class="cont">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true" @on-success="upLoadSuccess" @on-uploaded="uploaded"></u-upload>
					</view> -->
				</view>
			</view>
		</view>
       <view class="boxInfo-two">
       	<view class="title"><view class="title-left">汇款信息</view><view class="copy-btn redColor" @tap="copyAll()">复制</view></view>
       	<view class="box-list">
       		<view class="li">
       			<view class="name">开户支行：</view>
       			<view class="cont">{{bankInfo.bankName}}</view>
       			<view class="copy-btn" @tap="copyItem(1,bankInfo.bankName)">复制</view>
       		</view>
       		<view class="li">
       			<view class="name">开户名：</view>
       			<view class="cont">{{bankInfo.accountName}}</view>
       			<view class="copy-btn" @tap="copyItem(2,bankInfo.accountName)">复制</view>
       		</view>
       		<view class="li">
       			<view class="name">开户账号：</view>
       			<view class="cont">{{bankInfo.accountNo}}</view>
       			<view class="copy-btn" @tap="copyItem(3,bankInfo.accountNo)">复制</view>
       		</view>
       		<!-- <view class="li">
       			<view class="name">微信号：</view>
       			<view class="cont">{{bankInfo.accountWx}}</view>
       			<view class="copy-btn" @tap="copyItem(4,bankInfo.accountWx)">复制</view>
       		</view> -->
       		<view class="li">
       			<view class="name">支付宝账号：</view>
       			<view class="cont">{{bankInfo.accountZfb}}</view>
       			<view class="copy-btn" @tap="copyItem(5,bankInfo.accountZfb)">复制</view>
       		</view>
       	</view>
       </view>
	  
	   <view class="box-three">
		   <view class="title">注意事项：</view>
		   <view class="cont">
			   <view class="tip">汇款时请注意一下信息，请牢记！</view>
			   <view class="tip-li">1.线下公司转账订单，一个识别码对应一个订单和相应的金 额，请勿多转账或者少转账。 </view>
			   <view class="tip-li">2.请在7天内付清款项，超过10天未对账系统自动会取消订 单，到账周期为3个工作日起。</view>
		   </view>
	   </view>
	   <u-popup v-model="showRefuse" mode="center">
	   			<view class="Refuse"><u-input v-model=" rejectContent" type="textarea" placeholder="请输入拒绝理由" :border="border" height="100" :auto-height="true" />
				<view class="sureRefuse" @click="submitRefuse">确定</view>
				</view>
	   		</u-popup>
			<u-popup v-model="showBigImg" mode="center">
						<view class="BigImg">
							<u-image :src="imageUrl" mode="widthFix" width="660rpx"></u-image>
				</view>
					</u-popup>
		<view class="bottom">
			<view class="btn-yes" @click="agreeExamine" v-if="status==0">审核通过</view>
			<view class="btn-no"  @click="openRefuse" v-if="status==0">驳回申请</view>
		</view>
		
	</view>
</template>

<script>
	import {httpUrl,imgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				imgUrl:imgUrl,
				fileList:[],
				action:httpUrl+'upload/voucher',
				money:0,
				serialNumber:"",
				orderNumber:"",
				picList:[],
				picStr:"",
				payOrderNumber:"",
				show:false,
				
				showRefuse:false,
				amount:0,
				imgTransfer:"",
				status:"",
				userName:"",
				bankInfo:{
					accountName:"",
					accountNo:"",
					accountWx:"",
					accountZfb:"",
					bankName:""
				},
				voucherList:[],
				id:"",
				 rejectContent:"",
				 imageUrl:"",
				 showBigImg:false,
				 statusText:"",
				 isReject:false,
				
			};
		},
		onUnload() {
			
		},
		
		onLoad(options) {
			console.log(options)
			this.amount=options.amount;
			this.imgTransfer=options.imgTransfer;
			this.status=options.status;
			if(options.rejectContent){
				 this.isReject=true;
				 this.rejectContent=options.rejectContent;
			}
			if(this.status==0){
				this.statusText="待审核"
			}
			if(this.status==1){
				this.statusText="已通过"
			}
			if(this.status==2){
				this.statusText="已拒绝"
			}
			if(this.status==3){
				this.statusText="已发放"
			}
			this.userName=options.userName;
			this.id=options.id;
			this.voucherList=this.imgTransfer.split(",");
			this.fileList=this.voucherList.map((item)=>{
				let newUrl=this.imgUrl+item;
				return {url:newUrl};
			});
			this.getBankInfo();
		},
		methods: {
			getBankInfo(){
				let that=this;
				this.$u.post('mallmoneyapply/getAccountInfo').then(res=>{
					console.log(res)
					that.bankInfo=res;
				})
			},
			copyAll(){
				let data=this.bankInfo.accountName+';'+this.bankInfo.accountNo+';'+this.bankInfo.accountWx+';'+this.bankInfo.accountZfb+';'+this.bankInfo.bankName;
				uni.setClipboardData({
					data: data,
					success: function () {
						console.log('success');
					}
				});
			},
			copyItem(val,data){
				uni.setClipboardData({
					data: data,
					success: function () {
						console.log('success');
					}
				});
			},
			backPage(){
				uni.navigateBack();
			},
			agreeExamine(){
				let that=this;
				this.$u.get('mallmoneyapply/approved',{id:this.id,status:1}).then(res=>{
					uni.showToast({
						title: '已审核'
					})
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							delta: 1
						})
					}, 1500)
					
				})
			},
			upLoadSuccess(data, index, lists, name){
				
			},
			uploaded(lists, name){
				
				this.picList=lists;
				
			},
			openRefuse(){
				this.showRefuse=true;
			},
			submitRefuse(){
				let that=this;
				this.$u.get('mallmoneyapply/approved',{id:this.id,status:2,rejectContent:this.rejectContent}).then(res=>{
					uni.showToast({
						title: '已拒绝申请'
					})
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							delta: 1
						})
					}, 1500)
					
				})
			},
			openBigimg(url){
				this.imageUrl=url;
				this.showBigImg=true;
			}
			
		
		}
	}
</script>

<style lang="scss">
	.main{
		background-color: #F6F6F6;
		padding-top: 30rpx;
	}
	.boxInfo{
		width: 690rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: 600;
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
		.li{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			.name{
				color: #b7b7b7;
			}
			.cont{
				color: #1f1f1f;
			}
		}
		.li-upload{
			font-size: 24rpx;
			.name{
				color: #b7b7b7;
			}
			.cont{
				color: #1f1f1f;
			}
		}
	}
	.boxInfo-two{
		width: 690rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 30rpx;
		.title{
		
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.title-left{
				font-size: 32rpx;
				font-weight: 600;
				
			}
			.copy-btn{
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
			}
			.redColor{
				color: #ff4975;
				border: 2rpx solid #ff4975;
			}
		}
		.li{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			.copy-btn{
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
				margin-left: 10rpx;
			}
			.name{
				color: #b7b7b7;
				line-height: 48rpx;
				width: 144rpx;
			}
			.cont{
				color: #1f1f1f;
				line-height: 48rpx;
			}
		}
	}
	.box-three{
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		.title{
			font-size: 32rpx;
			font-weight: 600;
			color: #ff1c60;
			border-bottom: 2rpx solid #f8f8f8;
			margin-bottom: 10rpx;
			padding-bottom: 10rpx;
		}
		.cont{
			.tip{
				margin-top: 10rpx;
				
			}
			.tip-li{
				color: #c6c6c6;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}
	.bottom{
		
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #fff;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.btn-yes{
			width: 324rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(to right,#FFA24D,#FE381B);
			color: #fff;
			border-radius: 20rpx;
		}
		.btn-no{
			width: 324rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border: 2rpx solid #C0C0C0;
			border-radius: 20rpx;
		}
		
		
	}
	.apply-info{
		margin-left: 30rpx;
		margin-right: 30rpx;
		.apply-info-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			.apply-label{
				line-height: 70rpx;
			}
			.apply-input{
				line-height: 70rpx;
			}
		}
	}
	.Refuse{
		width: 600rpx;
		padding: 30rpx;
	}
	.sureRefuse{
		line-height: 70rpx;
		background: linear-gradient(to right,#FFA24D,#FE381B);
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
		margin-top: 20rpx;
		
	}
	.red{
		color: #FE381B;
	}
</style>
